import { MyEditor, Editor } from '@packages/Editor';
import { goViewArticle } from '@/utils/route.util';
import { Button, Layout, message } from 'antd';
import { Content, Header } from 'antd/es/layout/layout';
import styles from '../index.less';
import React, { useEffect, useRef, useState } from 'react';
import { getArticleDetail, modifyArticle } from '@/services/article.server';
import { history } from '@@/core/history';
import { useKeyPress } from 'ahooks';

const App = () => {
  const editRef = useRef<Editor>();
  const articleId = Number(history.location.query.id as string);
  const [articleCnt, setArticleCnt] = useState<string>('');
  useEffect(() => {
    getArticleDetail(articleId).then((res) => {
      setArticleCnt(res.content);
    });
  });
  const saveArticle = () => {
    const content = editRef.current?.getHTML();
    modifyArticle({
      id: articleId,
      content,
    }).then(() => {
      message.success('保存成功');
      // goViewArticle();
    });
  };
  useKeyPress(['ctrl.s'], (e) => {
    e.preventDefault();
    saveArticle();
  });
  return (
    <Layout>
      <Header>
        <Button onClick={() => goViewArticle()} className={'margin-1'}>
          返回预览
        </Button>
        <Button onClick={() => saveArticle()} className={'margin-1'}>
          保存
        </Button>
      </Header>
      <Content className={styles.editContent}>
        <MyEditor editable ref={editRef} content={articleCnt} />
      </Content>
    </Layout>
  );
};

export default App;
